<template>
  <div class="invoicinginfo_detail bigDetail">
    <el-dialog
      ref="ruleFormRef"
      :model-value=" dialogData.props.showDetail"
      title="查看"
      :before-close="close"
      :width="dialogData.formLabelWidth"
      :close-on-click-modal="false"
      draggable
    >
      <div>
        <div class="itemStyle ">
            <div class="notice-box">
              <p class="notice-title">{{dialogData.props.dialogTableValue.title}}</p>
              <p class="publishe mt-8">
                <span>发布单位：{{dialogData.props.dialogTableValue.publisherName}}</span> | 
                <span>发布时间：{{dialogData.props.dialogTableValue.publisherTime}}</span>
              </p>
              <p class="notice-context mt-8">发布内容：{{dialogData.props.dialogTableValue.context}}</p>
            </div>
            <div class="mt-16">
                <el-table
                        :data="dialogData.props.dialogTableValue.equipmentFiles"
                        :header-cell-style="{ background: 'rgba(242,245,250,1)'}"     
                        border
                        style="width: 100%"
                    > 
                        <el-table-column prop="name"   label="文件名" min-width="10%" >
                            <template #default="scope">
                            <span class="fileName" @click="handleLook(scope.row)">{{scope.row.name}}</span>
                        </template>
                        </el-table-column>
                        <el-table-column prop="time"   label="上传时间" min-width="10%" />
                        <!-- <el-table-column prop="fileSize"   label="文档大小" min-width="10%" /> -->
                        <el-table-column prop="fileTypeStr"   label="文档格式" min-width="10%" />
                        <el-table-column label="操作列" width="100" min-width="20%">
                            <template #default="scope">
                                <!-- <span class="buttonFun cursor" @click="handleLook( scope.row)">预览</span> -->
                                <span class="buttonFun cursor" @click="download(scope.row)">下载</span>
                            </template>
                        </el-table-column>
                    </el-table>
            </div>
            <p class="titleName mt-16">添加信息</p>
            <div class="flex ml-21">   
                    <p class="formItemStyle"><span class="labelStyle">添加人：</span><span class="contentStyle">{{dialogData.props.dialogTableValue.createUserName}}</span></p> 
                    <p class="formItemStyle"><span class="labelStyle">添加时间：</span><span class="contentStyle">{{dialogData.props.dialogTableValue.createTime}}</span></p>
            </div>         
        </div>
      </div>
    </el-dialog>
    <previewBox :previewDialog="dialogData.previewDialog" :file="dialogData.formData.file"
      @closePreview="closePreview()">
    </previewBox>
  </div>
</template>
<script  setup>
import previewBox from '../../preview/preview.vue'
import { defineProps, ref,defineEmits } from "vue";
import { reactive, watch,onBeforeMount } from "vue";
import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
import { useRouter } from 'vue-router';
import { Plus } from '@element-plus/icons-vue'
import { inject,getCurrentInstance  } from 'vue'
const instance = getCurrentInstance();
const router = useRouter();
const esign = ref('')
const addform = ref('');
const canvasContent = ref('')
let props = defineProps({
  dialogTableValue: {
    type: Object,
  },
  showDetail:{
      type: Boolean,
  }
}); 
const emit = defineEmits(['callback'])
const dialogData = reactive({
    formLabelWidth:instance.proxy.formLabelWidth,
    props:{
        dialogTableValue:'',
        showDetail:''
    },
    formData: {},
    previewDialog: false
})
watch(
  () => props.showDetail,
  () => {
        dialogData.props.dialogTableValue = props.dialogTableValue
        dialogData.props.showDetail = props.showDetail;
        console.log(dialogData.props.showDetail)
  },
  { deep: true, immediate: true }
);
//预览
const handleLook = (row) => {
  dialogData.previewDialog = true
  dialogData.formData.file = row
}
const closePreview =() => {
  dialogData.previewDialog = false
}

//下载
const download = (row)=>{
    window.open(row.url);
}
//返回上一级
const close = () => {
  emit("update:modelValue", false);
};

</script>
<style lang = 'less' scoped>
.invoicinginfo_detail {
  .notice-box{
    border: 1px solid #FF9458;
    border-radius: 4px;
    background-color: #FFBF9B;
    padding: 16px;
    background: rgba(255,148,88,0.08);
    .notice-title{
      color: #4B515B;
      font-size: 18px;
      font-weight: 700;
    }
    .publishe{
      color: #797F89;
    }
    .notice-context{
      color: #4B515B;
    }
  }
 .itemStyle{
    .titleName{
        color: #4B515B;
        font-size: 14px;
        padding-left: 8px;
        margin-left: 8px;
        border-left: 5px solid #2E83FC;
        margin-bottom: 16px;
    }
}
    .formItemStyle{
            color: #1C222C;
            font-size: 14px;
            width: 50%;
            display: flex;
            
            .labelStyle{
                display: inline-block;
                color: #797F89;
                font-size: 14px;
                margin-right: 8px;
                width: 130px;
                text-align: left;
                margin-bottom: 16px;
            }
            .contentStyle{
                display: inline-block;
                width: calc(100% - 140px);
            }
        }
        .displayFlex{
            display: flex;
        }
        .mt-5{
            margin-top: 5px;
        }
         
  }


.bigDetail{
    :deep(.el-input){
      width: 100%;
    }
    :deep(.el-select){
      width:100%;
    }
    :deep(.el-form-item__content) {
    width: 100%;
  }
    :deep(.el-dialog__footer) {
      padding-top: 16px;
      background-color: #ffffff;
    }
    :deep(.el-dialog__body) {
      padding: 0;
      max-height: 550px;
      overflow-y: auto;
      overflow-x: hidden;
      background-color: #ffffff;
      padding: 16px 32px;
    }
    :deep(.el-dialog__header) {
      border-bottom: 1px solid #cccccc;
      padding: 16px;
      margin-right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    :deep(.el-dialog__title) {
      color: #1C222C;
      font-size: 20px;
      width: 100px;
    }
    :deep(.el-dialog__headerbtn ){
      position: static;
      top: 0px;
      right: 0;
      padding: 0;
      width: auto;
      height: auto;
    }
  
  :deep(.el-form-item__label ){
    font-size: 14px;
  }
  :deep(.el-form) {
    position: relative;
  }
  
  :deep(.el-form-item__content) {
    width: 100%;
  }
  :deep(.el-form--inline .el-form-item){
      width:100%
  }
  }
</style>